import CEcharts from '@/components/echarts'
import RollerDigital from '@/components/rollerDigital'
import {CnBoldP, CnNormalP} from '@/components/text'
import {WaterTargetScreen} from '@/components/waterTarget'
import cecharts, {ECOption} from '@/libs/global/echarts'
import {coustomEchartTooltip} from '@/libs/toolkit'
import {CardChild, DevWatchMsgItem, ScreenCard} from './card'

/**
 * 立体柱形图制作方法
 * 1.做两个bar，两个的barGap设为0，假设barWidth为20
 * 2.做顶部菱形，
 */

export const WaterOverview = defineComponent({
  name: 'WaterOverview',
  setup() {
    let echart: cecharts.ECharts
    const data: [number[], number[]] = [
      [10, 0, 30, 40],
      [-10, -20, 0, -40]
    ]
    const state = reactive<{
      waterHealthyEchartOption: ECOption
    }>({
      waterHealthyEchartOption: {
        tooltip: {
          trigger: 'axis',
          className: 'tooltipBox',
          formatter: (params: any) =>
            coustomEchartTooltip(params, {contentTitle: '', contentLeftText: '评分'})
        },
        grid: {
          left: 0,
          right: 0,
          top: '4%',
          bottom: 10
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#F5F6F9'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#E5E8EF'
            }
          }
        },
        animation: true,
        animationDuration: 3000,
        series: [
          {
            zlevel: 0,
            z: 0,
            data: [1, 2, 3, 3, 4],
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbolSize: 12,
            lineStyle: {
              width: 2,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#2798dd' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#BFE9FF' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#326FFF1A' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#1180FF00' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
    })

    function handleParamStatusTatioOption(list: [number[], number[]]) {
      const symbolOption = {
        width: 14,
        height: 6,
        symbol: 'diamond'
      }

      const pictorialBarOption = {
        upZ: 3,
        downZ: 2,
        topColor: [
          ['#44E3FB', '#44E3FB'],
          ['#037EC2', '#037EC2']
        ],
        bottomColor: [
          ['#FFDA86', '#FFDA86'],
          ['#F4AD0A', '#F4AD0A']
        ]
      }

      const barOption = {
        barWidth: symbolOption.width / 2,
        z: 1,
        upColor: ['#037EC2', '#00AFCD'],
        downColor: ['#F4AD0A', '#FFDA86']
      }

      function handleSymbolData(value: number[]): (number | {value: number; symbolSize: 0})[] {
        return value.map(item => {
          return item ? item : {value: item, symbolSize: 0}
        })
      }

      const paramStatusTatioOption = {
        tooltip: {},
        grid: {
          left: 32,
          bottom: 32,
          top: 16,
          right: 32
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#CDD0D7'
            }
          },
          axisLabel: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#CDD0D7'
            }
          },
          axisLabel: {
            show: true
          }
        },
        series: [
          // 数据顶部的样式
          {
            stack: 'top',
            type: 'pictorialBar',
            symbolRotate: 0,
            symbolSize: [symbolOption.width, symbolOption.height],
            symbolOffset: [0, -symbolOption.height / 2],
            z: pictorialBarOption.upZ + 1,
            symbol: symbolOption.symbol,
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: pictorialBarOption.topColor[0][0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: pictorialBarOption.topColor[0][1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            symbolPosition: 'end',
            data: handleSymbolData(list[0])
          },
          // 数据的柱状图 左边
          {
            stack: 'bar1',
            type: 'bar',
            barWidth: barOption.barWidth,
            z: barOption.z,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: barOption.upColor[0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: barOption.upColor[1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            barGap: 0,
            data: list[0]
          },
          // 数据的柱状图 右边
          {
            type: 'bar',
            stack: 'bar2',
            barWidth: barOption.barWidth,
            z: barOption.z,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: barOption.upColor[0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: barOption.upColor[1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            data: list[0],
            barGap: 0
          },
          // 数据低下的圆片
          {
            stack: 'bottom',
            type: 'pictorialBar',
            symbolSize: [symbolOption.width, symbolOption.height],
            symbolOffset: [0, symbolOption.height / 2],
            symbolRotate: 0,
            z: pictorialBarOption.upZ,
            symbol: symbolOption.symbol,
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: pictorialBarOption.topColor[1][0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: pictorialBarOption.topColor[1][1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
              // color: 'transparent'
            },
            data: handleSymbolData(list[0])
          },

          // 数据顶部的样式
          {
            type: 'pictorialBar',
            symbolSize: [symbolOption.width, symbolOption.height],
            symbolOffset: [0, -symbolOption.height / 2],
            symbolRotate: 0,
            z: pictorialBarOption.downZ,
            symbol: symbolOption.symbol,
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: pictorialBarOption.bottomColor[0][0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: pictorialBarOption.bottomColor[0][1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },

            data: handleSymbolData(list[1])
          },
          // 数据的柱状图 左边
          {
            stack: 'bar1',
            type: 'bar',
            barWidth: barOption.barWidth,
            z: barOption.z,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: barOption.downColor[0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: barOption.downColor[1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            barGap: 0,
            data: list[1]
          },
          // 数据的柱状图 右边
          {
            stack: 'bar2',
            type: 'bar',
            barWidth: barOption.barWidth,
            z: barOption.z,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: barOption.downColor[0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: barOption.downColor[1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            barGap: 0,
            data: list[1]
          },
          // 数据底部的样式
          {
            type: 'pictorialBar',
            symbolSize: [symbolOption.width, symbolOption.height],
            symbolOffset: [0, symbolOption.height / 2],
            symbolRotate: 0,
            z: pictorialBarOption.downZ,
            symbol: symbolOption.symbol,
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: pictorialBarOption.bottomColor[1][0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: pictorialBarOption.bottomColor[1][1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            symbolPosition: 'end',

            data: handleSymbolData(list[1])
          }
        ]
      }
      echart.showLoading({text: '加载中...'})
      setTimeout(() => {
        echart.hideLoading()
      }, 2000)
      echart && echart.setOption(paramStatusTatioOption)
    }

    onMounted(() => {
      handleParamStatusTatioOption(data)
    })

    return () => (
      <ScreenCard title='水质总览'>
        <div class='h-64 flex items-center'>
          <WaterTargetScreen
            id='screen-wateroverview'
            radius={31}
            borderWidth={6}
            range={300}
            borderColor={['#27C4FF', '#089BF5']}
          >
            <RollerDigital class='text-24' endVal={83}></RollerDigital>
          </WaterTargetScreen>
          <div class='flex-1 h-full pl-26'>
            <CnBoldP class='mb-4'>水质优秀</CnBoldP>
            <div class='grid grid-cols-3 gap-x-8'>
              <DevWatchMsgItem title='当前设备' value={3} unit={'台'}></DevWatchMsgItem>
              <DevWatchMsgItem title='累计监测' value={2265} unit={'小时'}></DevWatchMsgItem>
              <DevWatchMsgItem title='正常监测' value={2264} unit={'小时'}></DevWatchMsgItem>
            </div>
          </div>
        </div>

        <CardChild title='水质健康评分趋势图'>
          <CEcharts
            id='waterHealthyEchart'
            width='100%'
            height='80px'
            option={state.waterHealthyEchartOption as ECOption}
          ></CEcharts>
        </CardChild>

        <CardChild title='水质数据健康程度'>
          <div class='grid grid-cols-3 gap-x-1'>
            <div
              class='rounded-l-8'
              style={{
                backgroundColor: '#F2FBFD'
              }}
            >
              <CnBoldP class='text-24 text-center'>91%</CnBoldP>
              <CnNormalP class='text-center'>水质健康时长</CnNormalP>
            </div>
            <div
              style={{
                backgroundColor: '#F2FBFD'
              }}
            >
              <CnBoldP class='text-24 text-center'>91%</CnBoldP>
              <CnNormalP class='text-center'>数据回传率</CnNormalP>
            </div>
            <div
              class='rounded-r-8'
              style={{
                backgroundColor: '#F2FBFD'
              }}
            >
              <CnBoldP class='text-24 text-center'>91%</CnBoldP>
              <CnNormalP class='text-center'>已连接</CnNormalP>
            </div>
          </div>
        </CardChild>

        <CardChild title='主要指标适宜占比'>
          <CEcharts
            id='paramStatusTatio'
            width='100%'
            height='157px'
            lazy={true}
            onInitEc={ec => {
              echart = ec
            }}
          ></CEcharts>
        </CardChild>
      </ScreenCard>
    )
  }
})
